html {
  font-family: sans-serif;
}
body {
  margin: 0;
}
.container:before,
.container:after,
.row:before,
.row:after{
  display: table;
  content: " ";
}
.container:after,
.row:after{
  clear: both;
}
.container{
	box-sizing: border-box;
	border: 1px solid #999999;
	padding: 10px;
}
.col{
	box-sizing: border-box;
	border: 1px solid #999999;
	background-color: #EEEEEE;
	height: 50px;
	margin: 10px;
	float: left;
}
@media only screen and (min-width: 769px) {
	.col-md-1{
		width: calc(8.333% - 20px);
	}
	
	.col-md-2{
		width: calc(16.666% - 20px);
	}
	
	.col-md-3{
		width: calc(25% - 20px);
	}
	
	.col-md-4{
		width: calc(33.333% - 20px);
	}
	
	.col-md-6{
		width: calc(50% - 20px);
	}
}

@media only screen and (max-width: 768px) {
	.col-sm-2{
		width: calc( 16.666% - 20px);
	}
	.col-sm-3{
		width: calc( 25% - 20px);
	}
	.col-sm-6{
		width: calc( 50% - 20px);
	}
	.col-sm-8{
		width: calc( 66.666% - 20px);
	}
	.col-sm-12{
		width: calc( 100% - 20px);
	}
}